// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, WhiteSpace, Button, WingBlank } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { } from './module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'
class PaymentResult extends Component {

  componentDidMount() {

  }


  render() {
    const { payAmount, payType, orderNo } = this.props
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="支付结果"
          back={Actions.mall()}
        />
        <ScrollView style={Style.content}>
          <View style={{
            // justifyContent: 'center', 
            alignItems: 'center',
            backgroundColor: '#fff'
          }}>
            <WhiteSpace size="lg"></WhiteSpace>
            <Icon name="md-checkmark-circle-outline" size={50} color={'#61676F'} />
            <Text style={{ fontSize: 26, color: '#61676F', lineHeight: 30, marginTop: 15 }}>订单支付成功</Text>
            <View style={{ margin: 10, flexDirection: 'row', }}>
              <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>支付方式</Text>
              <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>{payType}</Text>
            </View>
            <View style={{ margin: 10, flexDirection: 'row', }}>
              <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>支付金额</Text>
              <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>¥{payAmount}</Text>
            </View>
          </View>
          <View style={{
          }}>
            <WhiteSpace size="lg"></WhiteSpace>
            <WingBlank>
              <Button type="primary" onPress={() => {
                Actions.orderInfo({ order: { orderNo } })
              }}>查看订单</Button>
              <WhiteSpace></WhiteSpace>
              <Button onPress={() => {
                Actions.mall()
              }}>回到商场</Button>
            </WingBlank>
          </View>
          <WingBlank>
            <WhiteSpace size="lg"></WhiteSpace>
            <View style={{}}>
              <Text style={{ fontSize: 18, color: '#61676F', lineHeight: 20, marginBottom: 10 }}>温馨提示：</Text>
              <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>新尚镁不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作。</Text>
            </View>
          </WingBlank>
        </ScrollView>
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(PaymentResult))
